<template>
  <!-- 个人中心页 -->
  <div>
    <div class="profile" v-if="userInfo" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL+userInfo.head_img"
        class="avatar"
        alt
      />
      <img v-else src="@/assets/logo.png" class="avatar" alt />
      <div class="info">
        <div class="name">
          <span class="iconfont iconxingbienan" v-if="userInfo.gender==1"></span>
          <span class="iconfont iconxingbienv" v-if="userInfo.gender==0"></span>
          {{userInfo.nickname}}
        </div>
        <div class="date">{{userInfo.create_date.split('T')[0]}}</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>

    <!-- 导航栏组件 -->
    <navbar labelText="我的跟帖" descText="发布的所有回复" @barClick="$router.push('/myfollow')"></navbar>
    <navbar labelText="我的关注" descText="关注的用户" @barClick="$router.push('/attention')"></navbar>
    <navbar labelText="我的收藏" descText="文章-视频" @barClick="$router.push('/star')"></navbar>
    <navbar labelText="退出" descText="退出个人中心" @barClick="logout"></navbar>
  </div>
</template>

<script>
import navbar from "@/components/navBar";

export default {
  components: {
    navbar: navbar
  },
  methods: {
    handleBar(texts) {
      console.log(texts);
    },
    logout() {
      //1.清除用户id和token数据
      localStorage.removeItem("userId");
      localStorage.removeItem("token");

      //2.跳转到登录页
      this.$router.replace("/login");
    }
  },
  data() {
    return {
      userInfo: null
    };
  },
  //加载成功执行
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      method: "get",
      headers: { Authorization: "Bearer " + localStorage.getItem("token") }
    }).then(res => {
      console.log(res.data);
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.userInfo = data;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
  padding: 6.667vw;
  border-bottom: 1.111vw solid #e4e4e4;
  .avatar {
    width: 19.444vw;
    height: 19.444vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 2.778vw;
    font-size: 3.889vw;
    .name {
      .iconxingbienv {
        color: palevioletred;
      }
      .iconxingbienan {
        color: #6fb0df;
      }
    }
    .date {
      padding-top: 1.667vw;
      color: #bbb;
    }
  }
}
</style>